import {
  KeyWordModel
} from '../../models/keyword.js'
import {
  BookModel
} from '../../models/book.js'
const keywordModel = new KeyWordModel()
const bookModel = new BookModel()

import {
  paginationBev
} from '../behaviors/pagination.js'

Component({
  /**
   * 组件的属性列表
   */
  behaviors: [paginationBev], // 继承公共行为
  properties: {
    more: {
      type: String,
      observer: 'loadMore'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    historyWords: [],
    hotWords: [],
    dataArray: [],
    searching: false,
    q: '',
    loading: false,
    loadingCenter: false
  },
  // 初始化组件时，执行的函数
  attached() {
    this.setData({
      historyWords: keywordModel.getHistory() // 返回的是数组
    })
    keywordModel.getHot().then(res => { // 返回的是Promise
      this.setData({
        hotWords: res.hot
      })
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    loadMore() { // 加载更多数据
      if (!this.data.q) {
        return
      }
      if (this.isLocked()) { // 添加一个锁，避免用户操作过快，发送重复请求
        return
      }

      if (this.hasMore()) {
        this.locked() // 加锁
        // 数组的长度就是接下来拿取更多数据的起始参数
        bookModel.search(this.getCurrentStart(), this.data.q).then(res => {
          this.setMoreData(res.books)
          this.unlocked() // 解锁
        },() => {
          this.unlocked() // 加载失败也解锁
        })
      }
    },
    onCancel(event) { // 取消搜索
      this.initialize() // 初始化数据
      this.triggerEvent('cancel', {}, {})
    },
    onDel(event) { // 关闭搜索内容
      this.initialize() // 初始化数据
      this._closeResult()
    },
    onConfirm(event) { // input输入文本监听
      this._showResult()
      this.initialize() // 初始化数据
      this._showLoadingCenter() 
      const q = event.detail.value || event.detail.text
      this.setData({
        q
      })
      bookModel.search(0, q)
      .then(res => {
        this.setMoreData(res.books) // 设置数据
        this.setTotal(res.total) // 设置总条数
        // 确保存到缓存的都是有效的关键词，所以让搜索请求完成之后，再存入缓存
        keywordModel.addToHistory(q) 
        this._hideLoadingCenter()
      })
    },

    _showResult() { // 控制搜索的显示
      this.setData({
        searching: true
      })
    },

    _closeResult() { // 控制搜索的隐藏
      this.setData({
        searching: false,
        q: ''
      })
    },

    _showLoadingCenter() { 
      this.setData({
        loadingCenter: true
      })
    },

    _hideLoadingCenter() {
      this.setData({
        loadingCenter: false
      })
    }
  }
})
